<template>
    <div class="app-container calendar-list-container" v-loading="loading" element-loading-text="正在导出数据">
    <!-- filter 条件查询 -->
    <div class="filter-container">
      <el-input
            @keyup.enter.native="getData"
            clearable
            v-model="listQuery.orderType"
            style="width: 150px;margin-right:15px;"
            class="filter-item"
            placeholder="工单单别"
      ></el-input>

      <!-- style="width: 150px;margin-right:15px;" -->
      <el-input
            @keyup.enter.native="getData"
            clearable
            v-model="listQuery.workOrderNo"
            style="margin-right: 15px"
            :style="{ width: inputWid(listQuery.workOrderNo) }"
            class="filter-item"
            placeholder="工单单号"
      ></el-input>

      <el-input
            @keyup.enter.native="getData"
            clearable
            v-model="listQuery.orderPlanNo"
            style="margin-right: 15px"
            :style="{ width: inputWid(listQuery.orderPlanNo) }"
            class="filter-item"
            placeholder="计划批号"
      ></el-input>

      <el-input
            @keyup.enter.native="getData"
            clearable
            v-model="listQuery.technologyNo"
            style="margin-right: 15px"
            :style="{ width: inputWid(listQuery.technologyNo) }"
            class="filter-item"
            placeholder="品号"
      ></el-input>

      <el-input
            @keyup.enter.native="getData"
            clearable
            v-model="listQuery.clientNumber"
            style="margin-right: 15px"
            :style="{ width: inputWid(listQuery.clientNumber) }"
            class="filter-item"
            placeholder="客户品号"
      ></el-input>

      <el-select
          clearable
          @keyup.enter.native="getData"
          v-model="listQuery.workCenter"
          class="filter-item"
          filterable
          placeholder="请选择工作中心"
          @focus="getCenterList"
          style="width: 150px;margin-right:15px;">
          <el-option :value="item" :label="item" v-for="(item,index) in this.centerList" :key="index"/>
        </el-select>
      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="getData">搜索</el-button>

    </div>
    
    <!-- table 表格 -->
    <el-table  :data="tableInfo" :height="height" v-loading="loadingList" element-loading-text="给我一首歌的时间" stripe border fit highlight-current-row style="width: 100%">
      <el-table-column  label="序号" type="index" align="center" width="80px"/>
      <el-table-column label="工单单别"  prop="orderType" align="center"/>
      <el-table-column label="工单单号"  prop="workOrderNo" align="center"/>
      <el-table-column label="数量"  prop="estimateYield" align="center"/>
      <el-table-column label="工单品号"  prop="technologyNo" align="center"/>
      <el-table-column label="客户品号"  prop="clientNumber" align="center"/>
      <el-table-column label="计划批号"  prop="orderPlanNo" align="center"/>
      <el-table-column label="规格"  prop="specification" align="center"/>
      <el-table-column label="品名"  prop="technologyName" align="center"/>
      <el-table-column label="工序"  prop="processOrder" align="center"/>
      <el-table-column label="工序条码"  prop="deviceBarcode" align="center"/>
      <el-table-column label="工艺名称"  prop="processName" align="center"/>
      <el-table-column label="工作中心"  prop="workCenter" align="center"/>
      <el-table-column label="工序说明"  prop="remark" align="center"/>
    </el-table>
   
   <!-- pagination 分页 -->
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.page"
        :page-sizes="[5,10, 20, 30, 40, 100, 300, 500]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

     <el-divider></el-divider>

    <el-button type="success" size="small" @click="hExportExcel">导出数据Excel</el-button>

  </div>
</template>

<script>
import { getPlanMachine } from '@/api/orderAndMachine.js'
import {getCenter } from '../../api/workSection.js'
export default {
    name: 'processOrder',
    data() {
        return {
            total: 0,                           //数据的总数
            listQuery: {
                page: 1,                          //页码
                limit: 10,                        //每页显示的数据条数
            },
            tableInfo: [],
            loadingList: false,
            loading: false,
            height:650,
            centerList: [],                       //获取工作中心的列表
        }
    },
    computed: {
      inputWid() {
        return function (value) {
            if(!value || (value.length <= 10)){
              return '150px'
            } else {
              return (150 + (String(value).length-10)*6) + 'px'
            }
        }
      }
    },
    methods: {
      // 获取工作中心
      async getCenterList() {
        let query = {}
        // if(this.userInfo.departmentName == '喷涂车间') { query.isSpray = true }
        const {data} = await getCenter(query)
        this.centerList = data
      },
    transformDat(res) {
      const mapInfo = {
        orderType: '工单单别',
        workOrderNo: '工单单号',
        estimateYield: '数量',
        technologyNo: '工单品号',
        clientNumber: '客户品号',
        orderPlanNo: '计划批号',
        specification: '规格',
        technologyName: '品名',
        processOrder: '工序',
        deviceBarcode: '工序条码',
        processName: '工艺名称',
        workCenter: '工作中心',
        remark: '工序说明'
      }
      // 对data进行格式化
      // 取出所有的属性名
      const props = Object.keys(res[0]) // ['id','']
      console.log(props)
      // 将属性名从英文转为中文
      const header = props.map(zhkey => mapInfo[zhkey])
      console.log('中文的表头', header)
      // const data=[['xxxx','总裁办'，'13800000']]
      const data = res.map(obj => Object.values(obj))
      console.log(data)
      return { header, data }
    },
    // 导出excel
    async hExportExcel() {
      this.loading = true
      let query = Object.assign({},this.listQuery)
      query.page = 1
      query.limit = 10000
      console.log('%c导出excel传的参数query:','color:green;font-size:16px;')
      console.log(query)

      let arr = await getPlanMachine(query)
      if(arr.code != '1') return  this.$message.error(arr.msg)
      if(!arr.data || !arr.data.List.length) return this.$message({
              message: '数据为空！',
              type: 'warning'
          })
      if(arr.data.List.length){
        arr.data.List.forEach(item => {
            item.deviceBarcode = item.orderType + '-' + item.workOrderNo.trim() + '-' + item.processOrder
        });
      }
      const { header, data } = this.transformDat(this.setSort(arr.data.List))
        import('@/vendor/Export2Excel').then(excel => {
        // excel表示导入的模块对象
        console.log(excel)
        excel.export_json_to_excel({
        header, // 表头 必填
        data, // 具体数据 必填
        filename: '工单工艺-excel', // 文件名称
        autoWidth: true, // 宽度是否自适应
        bookType: 'xlsx' // 生成的文件类型
        })
      })
      this.loading = false
    },
    // 排序函数
    setSort(arr){
      let newArr = JSON.parse(JSON.stringify(arr))
      let arr1 = []
      newArr.forEach((item)=>{
        let obj = {
          orderType: item.orderType,
          workOrderNo: item.workOrderNo,
          estimateYield: item.estimateYield,
          technologyNo: item.technologyNo,
          clientNumber: item.clientNumber,
          orderPlanNo: item.orderPlanNo,
          specification: item.specification,
          technologyName: item.technologyName,
          processOrder: item.processOrder,
          deviceBarcode: item.deviceBarcode,
          processName: item.processName,
          workCenter: item.workCenter,
          remark: item.remark
      }
      arr1.push(obj)
      })
      return arr1
    },
    // 搜索按钮绑定的函数，向服务器发送表单数据
    // 所有传输的表单字段都不是必须的，按需查询
    async handleFilter() {
      let query = Object.assign({},this.listQuery)
      if(!query.orderType) delete query.orderType
      if(!query.workOrderNo) delete query.workOrderNo
      if(!query.orderPlanNo) delete query.orderPlanNo
      if(!query.clientNumber) delete query.clientNumber
      if(!query.workCenter) delete query.workCenter
      this.loadingList = true
      console.log('query',query)
      let data = await getPlanMachine(query)
      this.loadingList = false
      if(data.code == '2') {
        this.height = ''
        return this.$message.error(data.msg)
      }
      this.tableInfo = data.data.List
      if(this.tableInfo.length){
        this.tableInfo.forEach(item => {
            item.deviceBarcode = item.orderType + '-' + item.workOrderNo.trim() + '-' + item.processOrder
        });
        if(this.tableInfo.length<10){this.height = ''} else {this.height = 650}
      } else { this.height = '' }
      this.total = data.data.Count
    },
    // table表单下方的页码组件改变每页显示的数据条数
     handleSizeChange(val) {
      this.listQuery.limit = val
      this.handleFilter()
    },
    // table表单下方的页码组件改变页面
     handleCurrentChange(val) {
      this.listQuery.page = val
      this.handleFilter()
    },
    getData() {
      this.listQuery.page = 1
      this.listQuery.limit = 10
      this.handleFilter()
    },
  },
  // 进入页面获取table信息
  mounted() {
    this.handleFilter()
  }
}
</script>

<style>

</style>